<template>
	<view class="reviews-page">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<view class="nav-title">商品评价</view>
			<view class="nav-actions">
				<view class="action-icon" @click="goToNewReviews">
					<u-icon name="more-dot-fill" size="20" color="#999"></u-icon>
				</view>
			</view>
		</view>


		<!-- 评价统计 -->
		<view class="reviews-summary">
			<view class="summary-left">
				<text class="summary-title">评价({{ reviews.length }})</text>
			</view>
			<view class="summary-right">
				<text class="positive-rate">好评率 100%</text>
			</view>
		</view>

		<!-- 筛选标签 -->
		<view class="filter-tabs">
			<view 
				class="filter-tab" 
				v-for="(tab, index) in filterTabs" 
				:key="index"
				:class="{ 'active': activeTab === tab.key }"
				@click="selectTab(tab.key)"
			>
				<text>{{ tab.name }}({{ tab.count }})</text>
			</view>
		</view>

		<!-- 评价提示 -->
		<view class="reviews-tip">
			<text>为你挑选真实、有帮助的评价</text>
		</view>

		<!-- 评价列表 -->
		<view class="reviews-list">
			<view class="review-item" v-for="(review, index) in filteredReviews" :key="index">
				<view class="review-header">
					<view class="user-info">
						<image class="user-avatar" :src="review.avatar"></image>
						<view class="user-details">
							<text class="username">{{ review.username }}</text>
							<view class="rating">
								<u-icon name="star-fill" size="12" color="#ff4444" v-for="i in 5" :key="i"></u-icon>
							</view>
						</view>
					</view>
					<view class="review-date">
						<text>{{ review.date }}</text>
					</view>
				</view>
				<view class="review-content">
					<text class="review-text">{{ review.content }}</text>
					<text class="review-spec">{{ review.spec }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 'all',
			filterTabs: [
				{ key: 'all', name: '全部', count: 2 },
				{ key: 'positive', name: '好评', count: 2 },
				{ key: 'neutral', name: '中评', count: 0 },
				{ key: 'negative', name: '差评', count: 0 },
				{ key: 'withImage', name: '有图', count: 0 }
			],
			reviews: [
				{
					username: '账号已注销',
					avatar: '/static/logo.png',
					content: '系统默认好评',
					spec: 'M',
					rating: 5,
					date: '2025-02-28 00:00:00',
					type: 'positive'
				},
				{
					username: '匿名评价',
					avatar: '/static/logo.png',
					content: '系统默认好评',
					spec: 'M',
					rating: 5,
					date: '2025-02-09 17:59:55',
					type: 'positive'
				}
			]
		}
	},
	computed: {
		filteredReviews() {
			if (this.activeTab === 'all') {
				return this.reviews;
			} else if (this.activeTab === 'positive') {
				return this.reviews.filter(review => review.type === 'positive');
			} else if (this.activeTab === 'neutral') {
				return this.reviews.filter(review => review.type === 'neutral');
			} else if (this.activeTab === 'negative') {
				return this.reviews.filter(review => review.type === 'negative');
			} else if (this.activeTab === 'withImage') {
				return this.reviews.filter(review => review.images && review.images.length > 0);
			}
			return this.reviews;
		}
	},
	methods: {
		selectTab(tabKey) {
			this.activeTab = tabKey;
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 跳转到新的商品评价页面
		goToNewReviews() {
			uni.navigateTo({
				url: '/pages/goodsReviews/goodsReviews'
			});
		}
	}
}
</script>

<style scoped>
.reviews-page {
	background-color: #fff;
	min-height: 100vh;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}
.navbar .nav-left {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.navbar .nav-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #333;
}
.navbar .nav-actions {
	display: flex;
	gap: 20rpx;
}
.navbar .nav-actions .action-icon {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 评价统计 */
.reviews-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1px solid #f0f0f0;
}
.summary-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}
.positive-rate {
	font-size: 28rpx;
	color: #666;
}

/* 筛选标签 */
.filter-tabs {
	display: flex;
	padding: 20rpx 30rpx;
	gap: 20rpx;
	border-bottom: 1px solid #f0f0f0;
}
.filter-tab {
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #666;
	background-color: #f8f8f8;
	border: 1px solid transparent;
}
.filter-tab.active {
	background-color: #ff4444;
	color: #fff;
	border-color: #ff4444;
}

/* 评价提示 */
.reviews-tip {
	text-align: center;
	padding: 20rpx;
	border-bottom: 1px solid #f0f0f0;
}
.reviews-tip text {
	font-size: 24rpx;
	color: #999;
}

/* 评价列表 */
.reviews-list {
	padding: 0 30rpx;
}
.review-item {
	padding: 30rpx 0;
	border-bottom: 1px solid #f0f0f0;
}
.review-item:last-child {
	border-bottom: none;
}
.review-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20rpx;
}
.user-info {
	display: flex;
	align-items: center;
	gap: 20rpx;
}
.user-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
.user-details {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}
.username {
	font-size: 28rpx;
	color: #333;
}
.rating {
	display: flex;
	gap: 2rpx;
}
.review-date {
	font-size: 24rpx;
	color: #999;
}
.review-content {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}
.review-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
}
.review-spec {
	font-size: 24rpx;
	color: #999;
}
</style> 